<template>
  <div id="wrap" :style="{ fontSize:fontSize + 'px' }">
    <div class="header" style="margin-top: -10px">
      <a @click="$router.push('/risk')" class="repeat_">重新评测</a>
      <i @click="$router.push('/my')" class="iconfont icon-xiangzuo1"></i>
      <div v-if="$store.state.networkState" class="level">
        <img v-if="level === 'conservative'" src="../assets/img/保守.png" />
        <img v-if="level === 'midConservative'" src="../assets/img/中等保守.png" />
        <img v-if="level === 'balance'" src="../assets/img/平衡.png" />
        <img v-if="level === 'midAggressive'" src="../assets/img/中等进取.png" />
        <img v-if="level === 'aggressive'" src="../assets/img/进取.png" />
        <a>{{level | vRiskLevel}}型</a>
      </div>
      <div v-else class="level">
        <img src="../assets/img/平衡.png" />
        <a>平衡型</a>
      </div>
    </div>
    <v-networkerr 
      v-if="!$store.state.networkState"
      v-on:reload="reload"></v-networkerr>
    <div v-else class="content">
      <a>根据您的测评结果，向您推荐以下组合</a>
      <v-riskratingscard
      v-for="item in recommend"
      :key="item.id"
      v-if="item.recommend"
      @click.native="gotoDetail(item)"
      active
      :item="item">
      </v-riskratingscard>
      <v-riskratingscard
      v-for="item in recommend"
      :key="item.id"
      v-if="!item.recommend"
      @click.native="gotoDetail(item)"
      :item="item">
      </v-riskratingscard>
    </div>
  </div>
</template>

<script>
export default {
  name: 'risk-ratings',
  data () {
    return {
      fontSize: 10,
      riskLevel: {
        conservative : "保守",
        midConservative : "中等保守",
        balance : "平衡",
        midAggressive : "中等进取",
        aggressive : "进取"
      },
      recommend: [],
      level: ''
    }
  },
  methods: {
    getRiskratings () {
      this.baseService.get('/usr/riskLevel').then((res) => {
        if (!res.data) this.$router.push('/risk')
        this.level = res.data
      }).catch((err) => {
        if (err === 'timeout') this.$store.state.networkState = false
      })
    },
    findRiskRecommend () {
      this.baseService.get('/strategy/riskLevelRecommend').then((res) => {
        this.recommend = res.data
      }).catch((err) => {
        if (err === 'timeout') this.$store.state.networkState = false
      })
    },
    reload () {
      this.getRiskratings()
      this.findRiskRecommend()
    },
    gotoDetail (item) {
      this.$router.push(
        {
          path:'/subscribe/',
          query:
          {
            id: item.id + '&' + JSON.stringify(item)
          }
        }
      )
    },
  },
  created() {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
    this.getRiskratings()
    this.findRiskRecommend()
  },
  activated () {
    if (this.$route.query.refresh) {
      this.getRiskratings()
      this.findRiskRecommend()
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 22em;
  width: 100%;
  background-image: linear-gradient(-134deg, #C96DD8 0%, #3023AE 100%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  .level {
    display: flex;
    flex-direction: column;
    img {
      display: block;
      height: 9em;
      width: auto;
      margin: 0 auto;
    }
    a {
      height: 1.8em;
      width: 78%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      letter-spacing: 1px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 2.5em;
      flex-direction: row;
      font-size: 1.6em;
      margin: 1em auto 1.3em auto;
    }
  }
}
.content {
  padding: 1em 1.5em 0 1.5em;
  > a {
    font-size: 1.2em;
    margin-bottom: 1em;
    display: block;
    color: #666666;
  }
}

@media screen and (max-width: 320px) {
  p {
      font-size: 1rem;
  }
}
.repeat_ {
  position: fixed;
  top: 1.7em;
  right: 0.5em;
  color: white;
  font-size: 1.2em;
  letter-spacing: 2px;
}
.icon-xiangzuo1 {
  position: fixed;
  top: 1em;
  left: 0.4em;
  color: white;
  font-size: 2em;
}
</style>